<template>
  <div class="container">
    <el-card class="subject">
      <el-row type="flex" justify="space-between">
      <!-- 搜索 -->
      <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="学科名称">
            <el-input v-model="form.subjectName" placeholder="请输入学科名称"></el-input>
          </el-form-item>

          <el-form-item>
              <el-button @click="resetSub">清除</el-button>
              <el-button type="primary" @click="searchSub">查询</el-button>
          </el-form-item>
      </el-form>
      <el-row >
        <el-button type="success" :icon="EditPen" @click="addSkillBtn">新增学科</el-button>
      </el-row>
    </el-row>
      <!-- 警告 -->
      <el-alert
        :title="`数据共计${findPage.total}条`"
        type="info"
        show-icon
        :closable="false">
      </el-alert>

      <!-- 表格 -->
      <el-table
      :data="subList"
      style="width: 100%"
      class="table">
      <el-table-column
        prop=""
        label="序号"
        type="index"
        width="80px">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        fit="true"
        label="学科名称">
      </el-table-column>
      <el-table-column
        prop="username"
        label="creator">
      </el-table-column>
      <el-table-column  prop="addDate" label="创建日期">
        <template v-slot="{row}">
          {{filtrationTime(row.addDate)}}
        </template>
      </el-table-column>

      <el-table-column  prop="isFrontDisplay" label="前台是否显示">
        <template v-slot="{row}">
          {{row.isFrontDisplay=== 1? '是':'否'}}
        </template>
      </el-table-column>

      <el-table-column  prop="twoLevelDirectory" label="二级目录" >
      </el-table-column>

      <el-table-column  prop="tags" label="标签" >
      </el-table-column>

      <el-table-column  prop="totals" label="题目数量">
      </el-table-column>

      <el-table-column  prop="handle" label="操作" width="300px">
        <template v-slot="{row}">
          <!-- <el-link :underline="false" type="primary" @click="$router.push(`/subjects/directorys`)">学科分类</el-link> -->
          <el-link :underline="false" type="primary" @click="subClass('/subjects/directorys',row.id,row.subjectName)">学科分类</el-link>
          <el-link :underline="false" type="primary" @click="subTags(`/subjects/tags`,row.id,row.subjectName)">学科标签</el-link>
          <el-link :underline="false" type="primary"  @click="editSub(row)">修改</el-link>
          <!-- :disabled="disabledBtn(row.state)" -->
         <el-link :underline="false" type="primary" @click="delSub(row)">删除</el-link>
         </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row type="flex" justify="end" class="paging">
        <el-pagination
          @size-change="SizeChange"
          @current-change="SizeChange"
          v-model:current-page="findPage.page"
          v-model:page-size="findPage.pagesize"
          :page-sizes="[2, 6, 8, 10]"
          layout=" prev, pager, next,sizes, jumper"
          :total="findPage.total">
        </el-pagination>
    </el-row>

    </el-card>

    <!-- 新增弹框 -->
    <el-dialog title="新增学科" v-model="showSubDialog" align-center :style="{width:'450px'}">
        <addSubject @close="showSubDialog=false" @success="getSubList()" ref="subRef"></addSubject>
    </el-dialog>
  </div>
</template>

<script>
import { detail, list, remove } from '@/api/hmmm/subjects'
import { filtrationTime } from '../../filters/index.js'
import { EditPen } from '@element-plus/icons-vue'
import addSubject from './components/addSubject.vue'
import { ref } from 'vue'
export default {
  name: 'subjectsIndex',
  data () {
    return {
      form: {
        subjectName: undefined
      },
      findPage: {
        page: 1,
        pagesize: undefined,
        total: 0
      },
      subList: []
    }
  },
  components: { addSubject },
  created () {
    this.getSubList()
  },
  methods: {

    async getSubList () {
      const { data: { counts, items, page, pagesize } } = await list({ ...this.findPage, ...this.form })
      console.log(items)
      this.subList = items
      this.findPage.total = counts
      this.findPage.page = page
      this.findPage.pagesize = pagesize
    },
    // 删除
    delSub (row) {
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        await remove(row)
        this.$message.success('删除成功')
        this.getSubList()
      })
    },

    // 查询
    searchSub () {
      this.findPage.page = 1
      this.getSubList()
    },

    // 清除
    resetSub () {
      this.form.subjectName = undefined
    },

    // 分页
    SizeChange (val) {
      this.findPage.page = val
      this.getSubList()
    },
    subClass (path, id, name) {
      this.$router.push({
        path: path,
        query: {
          id,name
        }
      })
    },
    subTags (path, id, name) {
      this.$router.push({
        path: path,
        query: {
          id,name
        }
      })
    }
  },
  setup () {
    const showSubDialog = ref(false)
    // 新增学科弹框
    function addSkillBtn () {
      showSubDialog.value = true
    }

    const subRef = ref()
    // 修改弹框+ 数据回显
    async function editSub (row) {
      showSubDialog.value = true
      const { data } = await detail(row)
      subRef.value.form = data
    }
    return { filtrationTime, EditPen, showSubDialog, addSkillBtn, editSub, subRef }
  }
}
</script>
<style scoped lang="less">
.subject{
  margin: 10px;
}
// 分页
.paging{
 margin-top: 20px;
}
:deep .el-link__inner {
  margin-right: 15px;
}
// 表格
.table {
  margin-top: 15px;
}
</style>
